<template>
    <div class="app-container">
        <el-tabs tab-position="top" style="height: 600px ;">

            <el-tab-pane label="基本信息">
                <template>                    
                    <el-card class="box-card">
                        <div>
                            <add-service :service="serviceEntity" :operate="operate"  @callback="handleCloseAddServiceCallback"/>
                        </div>
                    </el-card>                      
                </template>
            </el-tab-pane>

            <el-tab-pane label="服务路由">
                <template>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <el-button style="float: right; padding: 3px 0" type="text">新增路由</el-button>
                        </div>
                        <div>
                            <route-table :serviceId="serviceId"/>
                        </div>
                    </el-card>                    
                </template>
            </el-tab-pane>

            <el-tab-pane label="服务插件">
                <el-card class="box-card">
                    <div>
                        <plugin-table :serviceId="serviceId" ref="pluginTableRef"/>
                    </div>
                </el-card>
            </el-tab-pane>

            <el-tab-pane label="新增插件">
                <plugin-list :service="service" @callback="handlePluginAddCallback"/>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>
<script>
//
import { getService} from "@/api/kong/service";
import { kongRouteByServiceId} from "@/api/kong/routes";
import AddService from "./addService";
import PluginList from '../components/pluginList';
import RouteTable from '../components/routeTable';
import PluginTable from '../components/pluginTable';

export default {
    props: {
        // 服务id
        serviceId:{
            type: String,
            required: true
        },
        serviceEntity:{
            type: Object,
            required: false,
        }
    },
    components:{
        AddService,
        PluginList ,
        RouteTable,
        PluginTable,
    },
    data(){
        return{
            // 服务信息
            service:{},
            // 路由信息
            routes:[],
            // 服务插件
            Plugins:[],
            // 操作类型
            operate: "edit"

        }
    } ,
    created(){  
        // console.log("serviceEntity："+JSON.stringify(this.serviceEntity));
        getService(this.serviceId).then(res=>{
            this.service=res.data;
        }).catch(err=>{});  
        
        kongRouteByServiceId(this.serviceId).then(res =>{
            // console.log("返回路由:"+JSON.stringify(res));
            this.routes=res.data
        }).catch(err=>{}); 
    },
    mounted(){
    },
    methods:{
        handleCloseAddServiceCallback(){
            this.callback();
        },
        handlePluginAddCallback(payload){
            // console.log("handlePluginAddCallback 被调用")
            this.$refs.pluginTableRef.headlePluginsByRouteId();
        },
        callback(){
            this.$emit('callback',"操作成功");
        },
    }
}
</script>
<style scoped>

</style>